Añadir un menú en el header es algo sencillo, pensé que personalizarlo con la herramienta de fuentes y colores lo haría aún más sencillo y así fue.
A petición de Javi vamos a añadir a ese menú un traductor con imagen de banderitas.
Primeramente añadimos el menú siguiendo los pasos de esta entrada, una vez lo tenemos añadimos el traductor.

Buscamos en plantilla Edición de HTML el lugar de los enlaces y añadimos lo que está en negrita.
ver código

<div class="menu">
<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>
<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

</ul>
</div>




Para enlazar las imágenes nos dirigimos a Google traductor y allí introducimos la url de nuestro blog, escogemos por ejemplo español-inglés, marcamos en Traducir y copiamos la url de la barra del navegador. Si tenemos problemas con la url porque es muy extensa podemos acortarla en http://liurl.com/
Esa url es lo que pegaremos en lugar de url-página--traductor1 lo haremos así con cada uno de los idiomas.

Añadimos ahora el buscador justo después del traductor.Lo haremos de la siguiente forma:
ver código

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>
<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>
</form></li>


Donde gemablog-.blogspot.com/ lo sustituimos por la url de vuestro blog (sin http)
Con el traductor y el buscador nos resultaría más o menos así:

ver código

<div class="menu">
<ul>

<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>
<li><a href="Url de la página" title="Título">Texto</a></li>

<li><a href='url-página-traductor1'>
<img alt='texto-idioma1' src='url-imagen-banderita1' title='texto-idioma1'/></a><a href='url-página-traductor2'><img alt='texto-idioma2' src='url-imagen-banderita2' title=' texto-idioma2'/></a></li>

<li><form action='http://search.blogger.com/' name='b-search' target='_blank'><input class='b-query' name='bl_url' type='hidden' value='gemablog-.blogspot.com/'/>
<input id='b-query' name='as_q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>
</form></li>


</ul>
</div>


Para que el buscador luzca le añadimos unos estilos donde incluiremos una imagen de fondo, los añadimos justo antes de ]]></b:skin>

#b-query {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRU1if3xebh9MMuwU3wvaaOb9c038Yq2pDsCn-6sW9oO7tVY2jVnUGwnG-2qldRVbDdTcfJ37LEzWoM3Fl5yjA2iHZiOnnQFGbuNVkVZGu45a36inIDj-HuQreLDk31QgK3LuS/s320/search.gif) no-repeat scroll 0 0;border:medium none;
color:#000;font-family:Georgia,serif;font-size:15px;
width:210px;
float:right;
margin-right:16px;
margin-bottom:10px;
}

Al añadir una imagen, la de este buscador o cualquier otro es posible que tengamos que dar más altura al menú en:

.menu {
width:660px;
height:27px; /* Probar con más altura */
background: $menubgColor;
border: 1px solid $menumainBorderColor;
}



JAVI

Houston tenemos un problema!!
Gema, meti todo lo que dices, pero cuando me voy a google traductor, meto la url de mi blog y copio la barra superior y la meto en (url-pagina-traductor1) me da el siguiente error: No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "prev" must end with the ';' delimiter. y ya no puedo continuar.
He metido en el menu el enlace de acceso al blog y muy bien, pero el traductor me has sido imposible.
S.O.S por favor!!
Gracias!!

Responder
EM2.0

Gema, "habemus menu",:D:D:D, hasta he estado probando a poner el traductor y el buscador allí, y funciona todo, todo. Aunque de momento lo he quitado porque mi "monstruo" pequeño reclama participar en el blog, así que voy a montarle "el rincón de Mortadelo", solo dios sabe lo que se le ocurrira poner en él.

Responder
Anónimo

Vamus a ver que pasa con tu banner grande que le da por desaparecer? que donde esta alojado se le va? que no es por la planti que en la rounders me pasaba lo mismo ya es la 3ª vez que desaparece a parte de avisarte por este tema en si es para desearte un buen finde

Responder
Anónimo

se me olvida lo del traductor tomo nota para mi proyectillo je je gracias por tanta y tan buena info

Responder
Gem@

yz Javi acorta esa url, puedes hacerlo en http://liurl.com/ ;)

yz Dña. Urraca los chicos aprenden rápido :) un día de estos te dice ¡quiero optimizar los títulos! os veo en un pulso para ver quien tiene mejor posición en Google :D

yz Nafire dame más datos que me ponga seria con mi banner ¿es el de la cabecera? ¿desaparece mientras carga la página o desaparece sin más y no aparece?

Responder
Anónimo

bueno tu lo tiens escrito como widget yo le llamo banner es el gran porque el pequeño ya lo tuve y un dia volo y luego vi que lo habias cambiado, he entrado en el blog y ya ha vuelto a aparecer pero eso cuando menos te lo esperas desaparece en cambio los otros que tengo nunca se han ido lo que pasa es que no le gusta mi blog je je, en serio te lo digo porque ya que te has molestado en hacerlo que no sea por la apgina donde esta alojado que pasa algo y no quiero el pequeño que se ve menos en comparación con los otros y no me da la gana vamos un beso.

Responder
EM2.0

¿En un pulso con mi hijo?, jejeje, ni de coña, siempre ganaría él yo soy del siglo pasado.

Responder
JAVI

Siii, ahora si Gema!! lo conseguimos, ya tengo mi menu con el traductor, ya pueden entrar todos los giris que quieran jajaja!!
Que guay lo de acortar la url eh??
Me encanta como me ha quedado, te invito a que lo veas y de paso vete para abajo y ve el footer que puse tambien gracias a ti ;
Gracias por las molestias que te tomas.
Un beso y hasta otra.

Responder
Gem@

yz Nafire he mirado y puede ser porque la imagen está alojada en ImageShack y si falla el servidor la imagen no se ve. Lo solucioné subiéndolas a Blogger :)

yz Dña. Urraca eso es mucho decir ¿qué tiene que ver haber nacido unos poquitos años antes mujer?
Unos tenemos facilidad para unas cosas y otros para otras dependiendo que nos gusten más o menos esas cosas.

yz Te quedó muy bien Javi ¿me dejas una sugerencia? yo le quitaría esas líneas separadoras a las banderitas o se las pondría en color #C5BEAA
El fotter quedó muy bonito y alegre :) me gusta :)

Responder
EM2.0

Créeme querida en otros no te lo discuto, en este tiene, los que nacimos antes que los ordenadores, tenemos que pensar antes para que sirve un botón antes de apretarlo, ellos lo aprietan directamente sabiendo ya lo que va a pasar.
Y bueno no venía a eso, venía a decirte que si por favor puedes venir un momento al cuchitril y pinchar en nuestro "flamante menu" donde dice blog roll, queremos que veas una cosa, pero léelo bien eh?.

Responder
Tony

Gema, son incontables las veces que he recurrido a ti, y me has prestado una valiosisisisisisisisisisima información, gracias a la cual, he podido construir, mi pequeño blog; Sin enbargo, se podrían contar con una mano, las veces que te he dado las gracias, así que aprovecho para decirte gracias, gracias, gracias,gracias, gracias, gracias, gracias, gracias, gracias y gracias.

Te dejo mi blog por si quieres sugerirme algo. Un beso y gracias de nuevo.
http://antonianzasworld.blogspot.com/

Responder
Neo

Hola Gema:

Una pregunta sobre el buscador. Tú tienes dentro del cuadro del buscador el lema Buscar...

Bien, yo tengo en el mío Buscar Película... en mi blog http://trailersyestrenos.blogspot.com lo que pasa es que al pinchar sobre él para buscar algo tengo borrar dicho lema, lo que es un poco molesto.

He visto que en el tuyo se borra automáticamente cuando intentas escribir algo en el buscador. ¿Qué valores tengo añadir en mi buscador para que se borre el lema que tengo puesto? ¿Sabrías decirmelo si no es mucha molestia?

Gracias.

Responder
JAVI

Vale Gema!! Gracias por tu sugerencia. Le quité las lineas separadoras al traductor y de paso al "acceder" le puse el color que me dijiste para las lineas y la verdad que queda mucho mejor y mas acorde con los colores del blog.
Eres única!! ;)
Me alegro que te gustara mi footer.
Gracias guapa!!

Responder
Anónimo

Hola gema, tengo un prblemilla con mi blog y me preguntaba si podias echarme una mano.
la verdad es que leyendo tu entrada sobre mostrar avatares en comentarios, esta bien, pero se ve que soy un torpon, no encuentro esos codigos.
en fin lo que me gustaria es tenerlo como tu, pero no se si en mi plantilla se podra.
saludos.
AJEDREZ CEHEGIN CLUB ENROQUE

Responder
Danols

Hola Gema, me presento ante ti hoy para hacerte una complicadita pregunta. Espero peudas ayudarme.

Tengo ya varios meses con un nuevo blog de noticias sobre el mundo del séptimo arte junto con varios amigos: http://zinegame.blogspot.com/

En dicho blog se nos ha presentado un pequeño inconveniente y es que para la publicación de cada noticia solemos colocar una pequeña imagen de 150x150 pixeles para que en la página principal no se deforme el mini cuadrito de cada noticia. Esto se ha tornado un poco tedioso a pesar de ya habernos acostumbrado, y quisiéramos saber si tal vez podrías ayudarnos a programar la plantilla para que cuando coloquemos una imagen, de cualquier tamaño, la plantilla cree su propio "thumbnail" que es como la llaman.

El resultado sería que al ver la noticia en la pág principal se viera la imagen reducida pero al leer la noticia en su página independiente, la imagen pueda ser de un tamaño mayor.

Es más o menos lo que sucede en esta plantilla: http://falknerpress.blogspot.com/

Espero me haya explicado bien y me hayas entendido.

Responder
Gem@

yz Club Ajedrez Cehegin Enroque la entrada que habla sobre mostrar el avatar es la siguiente:
http://gemablog-.blogspot.com/2009/09/avatar-en-comentarios.html
lo comento porque hay varias que hablan de avatar y puede ser confuso.No hay mucho que pueda explicar y no esté ahí, hay que hacerlo paso a paso activar para mostrar el avatar y a partir de ahí quizás no sea necesario hacer otro cambios. Sí con los primeros pasos el avatar no se muestra entonces seguimos con esa parte donde dice que debemos sustituir donde dice <dl id='comments-block'>

yz Hola Danols, normalmente las imágenes se suben en cualquier tamaño y como bien sabes se general la miniatura para mostrar en los post resumidos, cuando se trata de una plantilla adaptada lo mejor es mirar si en la plantilla original es decir la demo ocurre lo mismo.
En la siguiente url explico de qué forma puede conseguirse lo mismo y tal como me explicas.
http://gemablog-.blogspot.com/2009/03/resumen-en-todos-los-post.html
Pero como te decía lo mejor es mirar la original porque muchas veces en los comentarios que dejan al autor de la plantilla encontramos la solución ;)

Responder
Neo

De lo mío alguna solución Gem@???

Responder
gab

hola gema, saludos desde peru, mi problema te lo envio por correo ya que no me acepta para poder comentar y disculpa la confianza. espero su ayuda........

Responder
Gem@

yz Dña. Urraca es un detallazo esa entrada ¡GRACIAS!

yz Gracias a ti Tony me encantó conocer tu blog, es un buen trabajo ¡me gusta!

yz Neo siento la demora contesté a los otros desde el correo y no había visto el resto de comentarios :O
Eso que comentas se hace añadiendo los eventos onfocus y onblur.
Date una vuelta por esta entrada de J.Miur que es muy interesante y lo entenderás mejor:
http://vagabundia.blogspot.com/2008/05/personalizando-un-poco-los-buscadores-1.html

yz Hola Javi veo que ya está resuelto y queda genial, me alegra que a ti también te guste :D

Responder
Gem@

yz Hola gab veo tu comentario sin problemas :)

Responder
gab

es cierto pero te digo que habia intentado enviarte todo con lo que te envié a tu correo, no aceptaba ciertos codigos que tenia escrito como comentario.♣♣♣♣♣♣

Responder
Gem@

yz Ya me di cuenta después de leer el mail :)

Responder
Anónimo

Hola Gem@!
Hace tiempo que queria hacer un menu para mi blog y hoy al ver esta entrada me he animado. Ya lo meti y me quedo bien, pero una vez puesto, se me ocurrio que en vez de palabras, a cada enlace ponerle una imagen. Solo necesito que me digas el codigo para poder cambiar esas imagenes por texto, porque en el codigo que tu das en esta entrada no hay para poner la url de la imagen, o eso creo yo que se poco de esto. Solo eso y gracias!!

Responder
Gem@

yz El código de imagen es el siguiente:
<img src="url-de-la-imagen">
Bastará con sustituir el texto por el código :)

Responder
Neo

Muchas gracias Gem@ por el enlace. Ya lo tengo solucionado.

Gracias

Responder
Anónimo

Gem@, lo puse como me dijiste y me sale este error:
The element type "img" must be terminated by the matching end-tag "".
Lo mismo yo no añadi el codigo que me diste en el sitio adecuado, lo puse donde dice texto. DIme algo por favor.
Gracias

Responder
Gem@

yz Me alegra esté solucionado Neo :)

yz Anónimo puede ser un error de comillas dobles.
Por favor lee lo que dice sobre el formulario de comentarios ;)

Responder
Anónimo

Gem@ perdona, pero es que no se como solucionar eso de las comillas dobles ni se cuales pueden ser esas comillas que dan el problema. Es que intento poner aqui el codigo tal y como yo lo coloco para que lo veas pero cuando le doy a publicar comentario me dice que no es aceptable mi htlm
Ah!! ¿Y que es el formulario de comentarios que dices que leas?

Responder
Gem@

yz El tema de las comillas trata de sustituir las comillas dobles algo así " por las comillas simples algo así '
Prueba de esta forma:
<img src='url-de-la-imagen'>

- El formulario me refiero al texto que hay sobre mi formulario de comentarios es decir justo donde se escribe el comentario que dice "Si tu perfil no está activado añade la url del blog, es imprescindible para poder ayudarte"

Entiendo que todos los días hay personas que crean su blog y aún no saben como activar el perfil pero no cuesta trabajo dejar la dirección del blog para saber a quien nos dirigimos ;)

Responder
JAVI

Gema aqui estoy otra vez!!
No se si en estos dias te habras dado cuenta que el acceder que le puse al menu con solo texto lo cambié por una imagen. Tengo que decirte que lo meti de la misma forma que el traductor, en el mismo codigo pero con los datos del boton acceder. y si te has fijado la imagen queda mas baja que las banderas y no tengo forma de subirla para arriba porque se mueve todo ala vez, pero viendo como ha quedado despues del cambio de la resolución, he pensado otra cosa ¿tu sabrias como decirme para poner las banderas justamente encima de lo que es el dibujo del cartel de la cacharreria y dejo el acceder donde está? lo que necesito es saber poner un margen y yo jugar con la numeracion para separar las banderas del acceder y ponerlas como te he dicho.
Gracias!!

Responder
Priamo

Gema he creado un menu debajo de la cabecera y he colocado las banderitas del traductor pero no sé como quitar la barra azul que sale debajo de cada pestaña cuando me pongo encima de ellas. Cuando digo quitar me refiero solo quitar las que salen debajo de las banderitas. En tu blog observo que logicamente no tiene efecto el efecto (valga la redundancia) de las pestañas cuando nos ponemos encima de las banderitas.Mi blog de pruebas (priamo24.blogspot.com)
Gracias

Responder
Gem@

yz Priamo esa línea es la imagen de fondo del menú, está siempre pero se muestra al pasar el cursor porque en hover tiene más altura y muestra también la línea, mientras que sin pasar el cursor tiene menos altura y no la muestra.

Si copias la url de las tres imágenes del menú y la pegas en el navegador verás la misma imagen.
Puedes cortar esa imagen para eliminar la línea azul y luego pegarla en lugar de la otra url.
También tienes esto en los estilos:
<style type="text/css">
eso sólo se añade si los estilos no van añadidos dentro de las etiquetas <head> y </head>

Responder
JAVI

Gema no te preocupes, las banderas las dejo donde estan porque disminui el tamaño de todas las imagenes incluido la del acceder y ya no se mete encima de la cabecera que era lo que no me gustaba, pero no consigo poner al mismo nivel de las banderas la imagen del acceder. A ver si tu sabes como puedo hacerlo vale?
Gracias!!
Ah Gema tengo una curiosidad, por que a veces se ven las fotos de todos los comentaristas y la tuya en tu blog y a veces se ve solo esa imagen que tienes con un simbolo blanco y el fondo en burdeos?

Responder
Priamo

Dices:"Si copias la url de las tres imágenes del menú y la pegas en el navegador verás la misma imagen". Las url? de que imagenes hablas??

Dices:"Puedes cortar esa imagen para eliminar la línea azul y luego pegarla en lugar de la otra url". Puedes extenderte un poco más???
Perdona por mi insistencia pero no entiendo bien lo que me quieres transmitir.
Gracias

Responder
Gem@

yz Hola Javi no había visto tu comentario anterior y estaba cobtestandote cuando he visto el último.
Te decía que las banderas no se ven al mismo nivel de la imagen porque miden 24x13 y la imagen de acceder 70x31 ¿entiendes por qué queda más baja la imagen? habría que bajar las banderas y añadirles un margin a las imágenes procurando darle a las banderas un poco más del top (arriba)
El problema es que las medidas van establecidas en los estilos y engloban todo lo que añadimos dentro del bloque de menú, si bajamos las banderas bajará el botón también.
De saber que no pensabas añadir un menú sino las banderas y el botón acceder lo hubiéramos planteado de forma que con un div estaría todo resuelto.
Antes de hacer más cambios prueba a darle más altura a lo que sería la imagen de fondo del menú. Busca:
.menu {
width:103%;
height:0px;
background: #940f04;
border: 0px solid #000000;
}
y en height dale de altura por ejemplo height:30px crucemos los dedos y veamos como queda ;)


yz Priamo si miras los estilos que añadiste para el menú verás que hay tres líneas que corresponden a la url de una imagen, la verás tres veces y so una misma imagen.

Lo que te sugería es lo siguiente, guardas esa imagen en tu PC y con algún editor la cortas de forma que elimines la línea inferior de color azul. Luego esa imagen que arreglaste la subes a un alojamiento para conseguir la url y una vez tienes la url de la imagen recortada la añades en los estilos del menú, en los tres sitio que está la imagen haces lo mismo.

Otra opción es lo que te sugería Rosa cambiar de menú ;)

Responder
Priamo

Ahra lo veo mejor pero claro si la añado en los tres sitios la nueva url de la imagen recortada desaparecera de todas las pestañas del menu. N0?

Veo que te lo has tomado bien lo de Rosa :D, un saludo

Responder
Gem@

yz Desaparecerá la lína azul y se mostrará la imagen recortada.
No tengo por qué tomarme mal que se pregunte en diferentes sitios la misma pregunta, pero a veces pienso que eso nos conduce a que nos presten menos atención, podemos pensar que si ya le van a responder para qué perder el tiempo en buscar una solución cuando ese tiempo podemos dedicarlo a otra cosa. Después de todo es nuestro tiempo :)

Responder
JAVI

Gema nada!! lo intenté poniendole 30 y ademas muneros mayores y menores y no se mueve se queda en el mismo sitio , como si no le estuviera haciendo nada.
Ah no contestate la curiosidad que te pregunte antes.

Responder
Gem@

yz Javi entonces lo del menú tenemos que verlo con calma y darle una solución más práctica como quitar todos esos estilos e incluirlo en un div.
Si quieres mándame la plantilla y lo veo pero no te prometo que sea de un día para otro tengo unas cosillas que terminar y el tiempo me apremia ;)
La curiosidad jajaja me olvidé, hay problemas con el avatar de los comentarios si te fijas aquí no sale el avatar del autor del comentario en su lugar sale la imagen que tengo como fondo del avatar.
No toques nada de tu blog que el problema es general y de Blogger :)

Responder
JAVI

Ya va la plantilla pallá, no se si hará noche en el camino o llega sin parar a tomarse ni siquiera un café.jajaja
Bueno ya me diras, a ver donde está el problema.
Gracias por saciar mi curiosidad.jajaja
Besos.

Responder
Gem@

yz Ya la tengo Javi, a parecer llegó enseguida pero yo no estaba en la estación.
Mañana la miro que ya es muy tarde ;)

Responder
Priamo

Gema, por favor, como puedo hacer volver a la pagina de español cuando accedo a una traduccion. Veras en mi blog de pruebas (priamo24.blogspot.com)una vez accedia a la traduccion dandole a la X la cerraba y volvia a la pagina en español (es lo que quiero) pero en mi blog oficial (eltallerdepriamo.blogspot.com) cuando accedo a la traduccion si le doy a la X me cierra el blog y si le doy a la flecha retroceso no funciona.Muchas gracias

Responder
Gem@

yz Priamo he accedido a tu blog y la flecha de retroceso ha funcionado sin problemas, prueba ahora quizás sea algo pasajero.
Por otr aparte al acceder a tu blog (con Firefox) tiene esta imagen:
http://img1.xooimage.com/files/e/5/a/screenshot.8-145de5f.png
Eso ocurre porque los estilos del menú los añadiste fuera de head y cuando van fuera hay que añadir:
<style type='text/css'> al principio y </style> al final de los estilos ;)

Responder
Priamo

He añadido delante y al final de los estilos las lineas que me comentas y entonces el IE se ve mal tambien.Lo has probado, lo digo por si estoy colocandolos en sitio erroneo?
Un saludo

Responder
Priamo

Hola Gema: He decidido cambiar de menu y me he decidido por una entrada tuya que se llama: "Manu personalizado desde "Fuentes y colores". Lo tengo terminado y lo puedes ver en (priamo24.blogspot.com) PERO tengo algun detalle que quisiera con tu ayuda pulir:
---En Firefox no se ve bien (el menu queda vertical) no se que ocurre.
---La Navbar no me desaparece.
---En otro PC observo que las banderas salen con un fondo que en mi blog yo no veo.
Estaria,como siempre, muy agradecido de que me ayudaras.
Un saludo

Responder
Gem@

yz Priamo ordena primero tu plantilla, fíjate cuando decimos que algo se añade antes de ]]></b:skin> y cuando decimos que se añade antes de </head>
Si los añadimos antes de ]]></b:skin> lo hacemos normalmente tal y como los copiamos.
Pero si optamos por añadirlos antes de </head>
deben ir así:
<style type="text/css">
Aquí los estilos
</style>

Responder
Priamo

He limpiado la plantilla siguiendo tus indicaciones y:

- Tengo un problema nuevo:resulta que cuando pongo la url de la pag traductor al guardar la plantilla me sale un mensaje:
"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "prev" must end with the ';' delimiter."
No hay manera de que guarde esa url.
Que tengo mal ahora???????

Lo de ocultar la Navbar tampoco se realiza y creo que lo tengo bien colocado

Muchas gracias

Responder
Gem@

yz Priamo busca los estilos de .sexypanels{ y elimina justo sobre esos estilos esta línea:
<style type="text/css">
Luego, al final de esos estilos elimina también esta otra: </style>
Unas líneas después parece que hay lo siguiente:
<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]
</style>

eso añádelo antes de </head>
Veamos con esos cambios.

Responder
Priamo

Te he mandado un e-mail ya que por la entrada tenia problemas.
un saludo

Responder
Priamo

Gema no le des mas vueltas:P ya lo tengo solucionado. debí firjarme más en tu entrada donde dices:"Si tenemos problemas con la url porque es muy extensa podemos acortarla en http://liurl.com/". Asi lo hice y funcionó perfectamente en IE.
Solo observo que en Firefox el blog me queda como desplazado hacia la izq. podrias darme tu opinion para como ajustarlo como en IE??
Muchas gracias. ;)

Responder
Gem@

yz Recién te he enviado esa misma respuesta en el mail :)

Para centrarlo prueba añadiendo en
#main-wrapper {
width: 700px;padding: 4px;
margin: 0 10px;

y elimina el margin-left:5px;

Responder
Priamo

Hola Gema: He hecho lo que me dices y no se centra en Firefox.
Como pista observo que en firefox en la pantalla de "Elementos de pagina" en IE lo veo todo centrado pero en Firefox observo que la cabecera está desplazada a un lateral.
un saludo

Responder
Gem@

yz ¿Tienes el Firefox actualizado Priamo?

Responder
Priamo

He actualizao al decirmelo de v3.5 a v3.5.3 y ha mejorado el aspecto. No te preocupes seguramente éste blog de pruebas(priamo24.blogspot.com) está mal diseñado y en cuanto pueda lo revisaré ya que el blog oficial (eltallerdepriamo.blogspot.com) en IE está perfecto y en Firefox se ve casi perfecto.

Muchas gracias por tu inestimable colaboracion y ayuda en la elaboracion de mi Menu.

Responder
JAVI

Ah Gema gracias por revisar mi plantilla por lo del boton acceder, tendré que buscar una imagen mas pequeña como me dices.
Gracias por tu ayuda.

Responder
Gem@

yz Priamo ese casi perfecto podría solucionarse si disminuyes el main a width: 650px; y en margin-left:5px; prueba a 25px o 35px.


yz Hola Javi :)te he mandado mail con el tema de los colores :)

Responder
feromenoi

Hola gema.
Estuve buscando largamente en el historial de tu blog, un menú lateral para el blog, pero no encontré... :(

Como puedo colocar en mi blog un menú como el de esta pagina?:

http://www.banksy.co.uk/menu.html

gracias de antemano.

Mi blog es: desvariosdeunartista.blogspot.com

Responder
Gem@

yz Hola feromenoi ese menú se ha creado sobre una imagen de fondo a la que se han añadido los enlaces.
No estoy muy segura pero dependiendo donde deseas añadirlo se podría intentar algo similar :)

Responder
Anónimo

Hola Gema!

Gracias por tu respuesta!
Yo quisiera añadirlo exactamente en el mismo lugar donde esta en la página que te mencioné. En la esquina superior izquierda, como una imagen.
Yo puedo crear la imagen con las letras pero no se como colocarle los enlaces y mucho menos como colocarla en ese lugar en el blog.

Gracias :)

Responder
Tinkertripper

Hola, Gema; mmmh, primero, gracias por tu paciencia solucionando los problemones de los que somos petardos novatos... y ahora, la cuestión: he añadido el menú y una pestaña para traducir al inglés, acortando la URL del traductor de Google desde LiURL, pero al clickar desde mi blog no lo traduce. Seguro que tú sabes por qué... :$

Responder
Gem@

:: Tinkertraveler en la siguiente página de Google puedes ingresar la url del blog, escoges el idioma y la url que te orece en la barra del navegador es la que debes pegar en el código.
http://translate.google.es/#
Yo también tengo ese problema pero me temo que es por el guión, voy a mirarlo ;)

Responder
cn

hola gem@, ¿vale esto para el menú sencillo que he puesto en http://cielosdondeestaeldinero.blogspot.com? me temo que no, ¿no?

Responder
Gem@

:: Habría que hacer algunos retoques por ejemplo añadir la etiqueta li a los otros enlaces también.
O sustituir el otro menú por este que lo puedes personalizar desde fuentes y colores.

Responder
Tinkertripper

Gracias, Gema; el caso es que sigo igual. Por lo que veo, el problema es la url abreviada. He vuelto a repetir todo el proceso, y lo que me falla es que el buscador no encuentra la url que me da liurl. Si meto la dirección larga, me dice que The reference to entity "prev" must end with the ';' delimiter. Ayyyyyyyyy...

Responder
Gem@

:: Estoy en ello Tinkertraveler a mi también me pasa, nada más vea algo te comento aquí mismo.

Responder
Manuel de la Fuente

Excelente, Gem@; te robé las imágenes de las banderitas para construir un traductor similar, sólo que el mío traduce a 34 idiomas y detecta la dirección de la página en la que te encuentras. :O

Si quieres te paso el código en cuanto afine ciertos detalles que tiene. :)

Responder
Manuel de la Fuente

Mmm, ahora que me fijo bien, el que tienes implementado en el blog usa el mismo sistema. También los de Vagabundia y El Escaparate; el mío sólo varía en la inclusión de un menú.

Responder
Gem@

:: Hola Manuel, vi ese tarductor en la página de wallpapers de Vladstudio y me pareció muy vistoso, hay mucho sobre traductores y pienso que hay que añadir e que más se ajuste a las necesidades de cada uno. Yo tengo esos dos en el menú pero aparte tengo el de Google en la sidebar y el que más uso es el de la barra de Google para Firefox ¿viste la última entrada que hablo de eso?
Te va a gustar por lo útil que es.

Responder
Gem@

:: Donde tarductor era traductor :$

Responder
Manuel de la Fuente

Ja ja, no te preocupes. :D

Sí vi esa entrada, también tengo la Barra Google y la opción que mencionas personalmente me parece un fastidio y la tengo desactivada, prefiero seleccionar yo mismo las páginas que quiero traducir.

Siguiendo con la entrada en la que comento, la tenía en mis marcadores desde hacía mucho tiempo porque me gustó el traductor y pensé que podría mejorarlo con los condicionales de Blogger; no imaginé que también se te había ocurrido y acabaría creando lo mismo, me llevé el fiasco de mi vida. :$

Responder
Gem@

:: Manuel, esas cosas suelen ocurrir. Algunos lo interpretan como que se ha copiado pero los que gustamos de darle la vuelta a las cosas sabemos que no es así, y todo es producto de la coincidencia :)
Por cierto ¡Felices Fiestas!

Responder
Joan Irazu

Ando buscando un buscador para mi blog y creo que este quedari bien, me gusta en la posicion que se encuentra :), visiten: http://myestilodeyo.blogspot.com

Responder
Gem@

:: Gracias CHiCken :)

Responder
Priamo

Hola Gema, me ocurre lo mismo que a trinkertraveler (post 58) puedes ayudarme.
saludos

Responder
Gem@

:: Priamo para traducir al inglés prueba por ejemplo:

<a expr:href='&quot;http://64.233.179.104/translate?ie=UTF-8&amp;oe=UTF-8&amp;langpair=es|en&amp;u=&quot; + data:blog.url'><img alt='inglés' src='url de la imagen' title='Translate to English' width='20'/></a>

Responder
Priamo

Hola Gema: Tu codigo de Ingles Funciona perfectamente.Gracias.

Ahora bien, dime con lo has conseguido porque necesito los codigos para: Frances,Aleman,Italiano y Portugues.
Saludos

Responder
Gem@

:: la url sería siempre la misma modificando las dos últimas letras que nos proporciona el traductor de Google dependiendo la lengua de la traducción.

Responder
Priamo

Solucionado gracias de nuevo

Responder
Gem@

:: Perfecto Priamo :D

Responder
Hummingbird Pics ®

Gema, Me llamo Adrián. Antes que todo, muchas gracias por tus excelentes tutoriales. Como podrás ver en mi blog, ya he aplicado varias cosas:

http://hummingbirdpics.blogspot.com/

Sin embargo, me encuentro atorado con lo siguiente: no tengo idea de como vincular el menú del encabezado (donde tengo las banderitas para traducir a otros idiomas) con algunos contenidos en mi página.

Me explico, quiero un menú parecido al tuyo en donde al oprimir un botón me despliegue, mitos y leyendas, otro que al oprimirlo despliegue la información de contacto, otro que despliegue sugerencias, etc.

¡Me puedes ayudar por favor!

Supongo que deberé de abrir tantas nuevas páginas de blog como botones que desee vincular para pegar las URL a cada botón pero después, no tengo idea de ¿Cómo oculto esas páginas y las mantengo vinculadas a la página principal?

En fin, no se si estoy en lo correcto, ¡Tengo tremendo lío en estos momentos! jajajaja...

También si tienes alguna sugerencia adicional en relación con mi blog, mucho te lo agradeceré y tomaré muy en cuenta.

Gracias de antemano!!!!

Responder
Gem@

:: Hummingbirds estás en lo cierto cuando dices que debes editar tantas páginas como como botones deseas enlazar.
La cuestión es la siguiente, creas una página y le añades un título cualquiera con el contenido que deseas mostrar cuando marcas sobre el botób del menú. Una vez creada la página y editada verás que te da la opción de Editar - Suprimir - Visualizar, marcas sobre "Visualizar" y en ese momento que puedes ver la página editada copias la url que aparece en la barra del navegador, esa será la url que puedes añadir al menú para que sirva de enlace a un botón o bandera en particular.
El mismo proceso es para todos los enlaces que deseas añadir :)

Responder
Gem@

:: Me olvidaba, las páginas las ocultas simplemente editando el gadget de páginas y donde dice Páginas que mostrar no dejamos marcada ninguna :)

Responder
Hummingbird Pics ®

Gema,

Mil gracias por tu ayuda, sólo coméntame algo más. Donde puedo agregar las páginas adicionales, es decir, necesitaré crear cuentas adicionales en blogger o mi propio blog me da la posibilidad de crear dichas páginas adicionales.

Gracias nuevamente,

Responder
Gem@

:: Aquí puedes ver la forma de añadirlas :
http://gemablog-.blogspot.com/2010/01/paginas-en-blogger.html :D

Responder
Hummingbird Pics ®

Gema,

Disculpa de antemano tanta molestia, ha sido genaial tu recomendación, de hecho ya he llevado al cabo algunas prubas, sin embargo la nueva página (entrada) sólo modifica la información que he vertido en entradas propiamente y deja todo lo demás intacto, a mi me gustaria que la núeva página sólo mostrara la información que quiero verter en ella y nada más para que al vincular la URL al menú del header sólo aparezca esa información y no como me ocurre con las pruebas que he efectuado, que aparece todo mi blog y sólo cambia el recuadro de entradas propiamente.

Thank's again!!!!

Responder
Gem@

:: Puedo ver un ejemplo de lo que me dices en algún sitio??

Responder
Hummingbird Pics ®

Por su puesto:

http://hummingbirdpics.blogspot.com/

Si vas al header y presionas el botón de contacto, en lugar que sólo aparezca la información con el Twitter y el E-mail, aparece todo el contenido de mi blog y sólo cambia al presionar dicho boton mis entradas del blog.

Además, aparece abajo del header una leyenda que dice Contacto y página principal, no obstante que no está seleccionado el recuadro de mostrar página.

Te comento nuevmamente, que quiero obtener algo parecido a tu menú por ejemplo cuando presionas el botón de publicidad y que sólo aparece el contenido que haz dispuesto para ello.

Gracias de nuevo y espero tus comentarios.

Responder
Gem@

:: Eso ocurre porque lo que hay añadido al principio es un gadget con el contenido de "Bienvenidos / Welcome..." al estar posicionado al principio las páginas se mostrarán a continuación.
Para que no sea mostrado cuando se despliegan las páginas puedes probar añadiendo lo siguiente justo después de ]]></b:skin>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#Text1 {
visibility:hidden;
display:none;
}
</style>
</b:if>

Responder
Hummingbird Pics ®

He agregado lo que me recomendaste, y si quita el primer gadget pero deja todos lo demás continuando así el mismo problema.

De hecho todo el blog lo contruí con gadgets y las entradas sólo corresponden a las diferentes especies de colibríes que ire incorporando gradualmente.

Por esa razón, queria habilitar el menú para que al presionar el botón, la información se desplegara en una nueva página y con ello, así poder desaparecer algunos gadgets para hacer más dinámico el blog.

Por otra parte, en verdad no sabes cuanto agradezco toda la ayuda que me estás prestando.

Responder
Gem@

:: Lo de construir todo con gadget a la larga será un problema ya lo he visto más de una vez que con el tiempo no resulta práctico tanto gadget. Hay una forma de ocultar todo cuando se marquen los botones del menú pero es una explicación algo extensa para un comentario, si quieres mejor creamos una entrada porque así aclaro algunas dudas que tengo pendientes ;)

Responder
Hummingbird Pics ®

La idea principal de usar gadgets fué tener disponible información que a mi criterio, consideré importante dajar fija, y las entradas de las diferentes especies de colibriés (aproximadamente 328) pensé incorporándolas gradualmente, conforme fuera recabando información e imágenes.

Pero ahora que gracias a ti, tengo conocimiento de la creación de páginas adicionales y el como ocultar los enlaces, gradualmente mudaré de gadgets a entradas para reinstalar el menú y enlazar las URLs a los diferentes botones para que así pueda desplegar de mejor forma la información.

Sin embargo, tengo aún una pregunta que hacerte, ¿Cómo puedo mantener en algunas páginas (entradas) gadgets fijos y que éstos no se desplieguen en otras páginas? ya que esto es lo que me ha estado ocurriendo.

¡Gracias nuevamente por tus atenciones!

Responder
Gem@

:: Hummingbird Pics el tema de las páginas estáticas lo tengo en mente y más habiendo que te hace falta lo que ocurre que el tiempo vuela de lo lindo y estos días lo llevo fatal, de todas formas por si quieres ir solucionando eso he buscado una entrada que es más o menos lo mismo que yo deseaba explicar sólo que con alguna diferencia respecto al diseño:
http://elescaparatederosa.blogspot.com/2010/03/cambiar-el-diseno-de-las-paginas.html

Si los gadgets se encuentran antes de las entradas es lógico que se vayan abajo al desplegar la entrada, en la sidebar no ocurre porque se muestran en un espacio independiente.

Responder
Hummingbird Pics ®

Fíjate que no obstante que la entrada este abajo del slide bar o donde lo tenía originalmente, al abrir una nueva página, ésta despliega la nueva información y conserva todos los gadgets o widgets en su lugar. Jajajaja. ¡Súper raro!

Por otra parte, podrías decirme por favor, ¿Cómo al buscador interno se le puede agregar un botón de buscar?

Responder
Gem@

:: No entiendo lo que me dices, no veo las pestañas del menú para que se despliegue :S
Añadir un botón te va a resultar más complicado que añadir un nuevo buscador pero te dejo un enlace donde lo explican:
http://vagabundia.blogspot.com/2008/05/personalizando-un-poco-los-buscadores-1.html

Responder
Hummingbird Pics ®

Querida Gema,

Mil gracias por todos tus consejos, han sido muy útiles. Lo que ahora tengo en mente hacer, es crear un blog de pruebas y una vez que domine todo este rollo de la creación de nuevas páginas y que éstas, a su vez oculten el contenido de los gadgets de la página principal, entonces lo implementaré en mi página oficial. A mi criterio lo más probable para poder solucionar esto, es modificar la plantilla en HTML y en el caso que obtenga información al respecto, da por un hecho que la compartiré contigo.

Mil Gracias por todo y seguimos en contacto.

Recibe un fortísimo abrazo.

Responder
Gem@

:: Hummingbird si tu idea es decorar o personalizar la plantilla a tu gusto te recomiendo usar la plantilla Minima de Blogger es delas antiguas de las que podemos acceder a ellas al final de la plantilla en edición de html:
http://gemablog-.blogspot.com/2010/07/aclarando-mis-ideas-sobre-las-nuevas.html
A esa plantilla le puedes añadir la imagen de fondo que quieras y como te decía aplicar casi por no decir todos los cambios que deseas incluido ese tema de mostrar las páginas estáticas ocultando el resto del blog .
De todas formas queda a tu elección naturalmente.
Un saludo cordial ;)

Responder
Hummingbird Pics ®

Gema,

Después de mucho pensar las opciones que muy amablemente me explicaste, opte por cambiar mis gadgets por entradas y crear un menú abajo del encabezado. Fué una labor mega extenuante, pero los resultados superaron mis expectativas. Ahora todo lo tengo más organizado e incluso pude ilustrar mis entradas.

Te pido por favor, que si tienes alguna idea que pueda implementar para mejorar mi blog, puedas comentármelo.

Mil gracias por toda tu ayuda!!!

Responder
Gem@

:: Hummingbird Pics ® me alegra tomaras esa determinación, te alegrarás del cambio.
Sobre darte ideas es algo que me supera cuando me lo sugieren porque las ideas nadie mejor que el propio autor para saber lo que quiere ;)

Responder
José Romero

Hola Gem@ estoy tratando de implementar el buscador para que sea dinámico y cuando haga click en el boton traduzca la página en la que estas, y no vaya a la web principal.

He probado esta función para inglés por ejemplo

javascript:var%20t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var%20e=(document.charset||document.characterSet);if(t!=''){location.href='http://translate.google.com/?text='+t+'&hl=es&langpair=auto|en&tbb=1&ie='+e;}else{location.href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&hl=es&langpair=auto|en&tbb=1&ie='+e;};

pero no me ejecuta correctamente, alguna sugerencia para hacer el boton de traducir dinámico.

Muchas gracias, saludos y buen fin de semana =)

Responder
Gem@

:: Jose M Romero no entiendo muy bien eso traduzca en la página donde te encuentras porque tal y como está explicado en esta entrada traduce de esa forma:
De todas formas si lo que tratas es de añadir el buscador dinámico mira esta entrada:

http://gemablog-.blogspot.com/2008/03/buscador-dinmico-de-google.html

Responder
Priamo

Hola Gema.Quiero poner la banderita de España y que traduzca. Pero claro para obtener la url del traductor google como la consigo porque no traduce de español a español.

Responder
Anónimo

Hola Gema eres lo maximo hace unas semana desde que conoci este blog y me enamore jijiji mi problema era como conseguir el url del traductor jajaj gracias mira como me queda http://loscomo.blogspot.com/

Responder
Gem@

:: El capo en la entrada lo dice hay que ir Google Traductor y copiar la url de la nabba del navegador una vez hemos traducido nuestro sitio ;)

Responder
Anónimo

jjijij ya lo consegui cuando dije era significa que no lo sabia y este post me lo enseño jiji graxx !

Responder
Gem@

:: Estupendo :D

Responder
Anónimo

hola Gem@ sabes ya no se que hacer para atraer visitas a mi blog dame un consejo XD!
http://loscomo.blogspot.com

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top